<template>
    <div>
`    <div class="layout-main">
        <div style="display:flex;item-align:center;margin-top:50px;padding-bottom:10px">  
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item style="font-size:18px;" :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item style="font-size:18px;" :to="{ path: '/supplyDemand' }">供需展示</el-breadcrumb-item>
                <el-breadcrumb-item style="font-size:18px;" >供给一览</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div id="chosenPanel">
            <div style="font-family:'Microsoft Jahei';font-size:14px">供给类别：</div>
            <!-- <el-checkbox-group ref='checkBox' v-model="chosenList">
                <el-checkbox label="铝土矿" style="font-size:18px;" >

                </el-checkbox>
                <el-checkbox label="氧化铝" style="font-size:18px;" >

                </el-checkbox>
                <el-checkbox label="电解铝" style="font-size:18px;" >

                </el-checkbox>
                <el-checkbox label="成品铝" style="font-size:18px;" >

                </el-checkbox>
            </el-checkbox-group> -->
            
            <el-radio-group ref = "radio" v-model="genre">
                <el-radio :label=1>铝土矿</el-radio>
                <el-radio :label=2>氧化铝</el-radio>
                <el-radio :label=3>铝锭</el-radio>
                <el-radio :label=4>成品铝</el-radio>
                <el-radio :label=5>所有</el-radio>
            </el-radio-group>
            <div style="margin-left:50px">
                <el-button type='primary' icon="el-icon-search" @click="filter()">搜索</el-button>
            </div>
        </div>

        <!-- flex排列摆放缩略图区域-->
        <div style="display:flex;flex-wrap:wrap;width:100%;">
            <div v-for="(good,index) in goodList" :key=index style="width:250px;height:250px;margin:30px;cursor:pointer" >
                    <!-- <img class="goods-image" style="display:block;width:100%;height:70%;margin-bottom:10px;" :src="good.goodsSkuImgurl" alt="图片"> -->
                    
                        <div style="font-size:15px;font-weight:bold;margin-top:10px;margin-bottom:10px">{{ good.goodsSkuName}} </div>
                        <div style="margin-bottom:10px;">{{ good.firmName}} </div>
                        <div style="display:flex;position:relative">
                            <div style="color:red;font-size:18px">{{ good.goodsSkuPrice}}</div>
                            <div style="position:absolute;right:1px;">
                                <router-link :to="{path:('/supplyDemand/goods/' + good.goodsSkuId)}">查看详情></router-link>
                            </div>
                        </div>
            </div>
        </div>


        <!-- <el-card  style="margin-top:30px">
            
            <el-table :data="goodList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="商品ID" prop="id"></el-table-column>
                <el-table-column label="商品名称" prop="goodsSkuName"></el-table-column>
                <el-table-column label="商品种类" prop="goodsTypeId"></el-table-column>
                <el-table-column label="店家名称" prop="firmName"></el-table-column>
                <el-table-column label="详情页面" prop="url">
                    <template slot-scope="scope">
                        <router-link v-bind:to="'/supplyDemand/goods/'+scope.row_sku_id" style="color:#409EFF">链接</router-link>
                    </template>
                </el-table-column>
            </el-table>

        </el-card> -->

        <div class="block">
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000">
            </el-pagination>
        </div>
        <div style="padding-bottom:30px"></div>
    </div>`
    </div>
</template>

<script>
import axios from "@/utils/request";

export default({
    data(){
        return{
            queryInfo:{
                // "page":1,
                // "page_Size":10,
                // "Genre":"铝土矿"         //做成单选
                "page":this.$route.query.page,
                "pg_size":this.$route.query.page_Size,
                "type":this.$route.query.genre
            },
            goodList:[{"goodsSkuId":1,"goodsTypeId":"3","goodsSkuName":"甲铝锭","firmName":"A公司","goodsSkuPrice":"990元/吨","goodsSkuImgurl":require("@/assets/ld1.jpg")},
                {"goodsSkuId":2,"goodsTypeId":"4","goodsSkuName":"铝条","firmName":"B公司","goodsSkuPrice":"20元/千克","goodsSkuImgurl":require("@/assets/lvtiao1.jpg")},
                {"goodsSkuId":4,"goodsTypeId":"1","goodsSkuName":"乙铝矿","firmName":"C公司","goodsSkuPrice":"123元/千克","goodsSkuImgurl":require("@/assets/ltk1.jpg")},
                {"goodsSkuId":4,"goodsTypeId":"1","goodsSkuName":"乙铝矿","firmName":"C公司","goodsSkuPrice":"123元/千克","goodsSkuImgurl":require("@/assets/ltk1.jpg")},
                {"goodsSkuId":4,"goodsTypeId":"1","goodsSkuName":"乙铝矿","firmName":"C公司","goodsSkuPrice":"123元/千克","goodsSkuImgurl":require("@/assets/ltk1.jpg")},
                {"goodsSkuId":4,"goodsTypeId":"1","goodsSkuName":"乙铝矿","firmName":"C公司","goodsSkuPrice":"123元/千克","goodsSkuImgurl":require("@/assets/ltk1.jpg")}],
            showList:[{"goodsSkuId":1,"goodsTypeId":"3","goodsSkuName":"甲铝锭","firmName":"A公司","goodsSkuPrice":"990元/吨","goodsSkuImgurl":require("@/assets/ld1.jpg")},
                {"goodsSkuId":2,"goodsTypeId":"4","goodsSkuName":"铝条","firmName":"B公司","goodsSkuPrice":"20元/千克","goodsSkuImgurl":require("@/assets/lvtiao1.jpg")},
                {"goodsSkuId":4,"goodsTypeId":"1","goodsSkuName":"乙铝矿","firmName":"C公司","goodsSkuPrice":"123元/千克","goodsSkuImgurl":require("@/assets/ltk1.jpg")},
                {"goodsSkuId":4,"goodsTypeId":"1","goodsSkuName":"乙铝矿","firmName":"C公司","goodsSkuPrice":"123元/千克","goodsSkuImgurl":require("@/assets/ltk1.jpg")},
                {"goodsSkuId":4,"goodsTypeId":"1","goodsSkuName":"乙铝矿","firmName":"C公司","goodsSkuPrice":"123元/千克","goodsSkuImgurl":require("@/assets/ltk1.jpg")},
                {"goodsSkuId":4,"goodsTypeId":"1","goodsSkuName":"乙铝矿","firmName":"C公司","goodsSkuPrice":"123元/千克","goodsSkuImgurl":require("@/assets/ltk1.jpg")}],
            total:'',
            currentPage3:1,
            chosenGenre:1,
            genre:0,
            url:"http://localhost:8009/lv-industry-app/goodsSku/get-overview-sku",
            url2:"http://localhost:8009/lv-industry-app/goodsSku/get-latest-sku",
            chosenList:["1","2","3","4"]
            
        };
    },
    created(){

        this.getGoodsAllList()
        
    },
    methods: {
        async getGoodsAllList(){
            await axios.get(this.url2).then((result)=>{
                if(result.success == true)
                    this.goodList = result.data
            })
        },
        async getGoodsList(){
            // const {data:res} = await this.$http.get(this.url,{
            //     params:this.queryInfo
            // })//params具体格式要再对接，是否有成功码
            // this.goodList = res.data;
            await axios.get(this.url,{params:this.queryInfo}).then((result)=>{
                if(result.success == true)
                {
                    this.goodList = result.data
                    this.showList = [...this.goodList]
                }
            })
        },
        handleCurrentChange(val){
            this.queryInfo.page= val
            this.getGoodList()
            //console.log(this.queryInfo)
        },
        filter()
        {
            this.showList = []
            // for(var i = 0;i < this.goodList.length;i++)
            // {
            //     if(this.goodList[i].goodsTypeId == this.genre)
            //         this.showList.push(this.goodList[i]);
            // }
            console.log(this.genre)
            if(this.genre == 5)
            {
                this.getGoodsAllList()
            }
            else
            {
                this.queryInfo.type = this.genre;
                this.getGoodsList();
            }

            console.log(this.goodList)
            
        },

    },
})
</script>

<style scoped>
.layout-main
{
    margin-left: 120px;
    margin-right: 120px
}

#chosenPanel
{
    display:flex;
    padding-top:10px;
    padding-bottom:5px;
    align-items: center;
}
</style>